<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

	<link rel="stylesheet" href="../plugins/select2/select2.css" />
	<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
	<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

	<div th:insert="/common/common"></div>
</head>
<script>
	$(function (){
		$("#brandid").select2()
		getoption(0)
	})
	//拼接展示页面
	function getoption(id){
		$.ajax({
			url:"/goddsController/findAll?id=" + id,
			type: "post",
			dataType: "json",
			async: true,
			success: function (list){
				console.log(list)
				var tbItemCats = list.t;
				var option = "<option value='-1'>请选择</option>"
				for (var i = 0; i < tbItemCats.length; i++) {
					option += "<option id='" + tbItemCats[i].id + "' value='" + tbItemCats[i].id + "'>" + tbItemCats[i].name + "</option>"
				}
				$("#select1").html(option)
			},
			error: function (list){
				console.log(list)
				alert("网络错误")
			}
		})
	}

	function getoption2(obj){
		// 获取参数
		var id = obj.value;
		$("#select1id").val(id)
		$.ajax({
			url:"/goddsController/findAll?id=" + id,
			type: "post",
			dataType: "json",
			async: true,
			success: function (list){
				console.log(list)
				var tbItemCats = list.t;
				var option = ""
					for (var i = 0; i < tbItemCats.length; i++) {
						option += "<option id='" + tbItemCats[i].id + "' value='" + tbItemCats[i].id + "'>" + tbItemCats[i].name + "</option>"
					}

					$("#select2").html(option)

			},
			error: function (list){
				console.log(list)
				alert("网络错误")
			}
		})
	}
	function getoption3(obj){
		var id = obj.value
		$("#select2id").val(id)
		$.ajax({
			url:"/goddsController/findAll?id=" + id,
			type: "post",
			dataType: "json",
			async: true,
			success: function (list){
				console.log(list)
				var tbItemCats = list.t;
				var option = ""
				for (var i = 0; i < tbItemCats.length; i++) {
					if (tbItemCats[i].name)
					option += "<option id='" + tbItemCats[i].id + "' value='" + tbItemCats[i].id + "'>" + tbItemCats[i].name + "</option>"
				}
				$("#select3").html(option)
			},
			error: function (list){
				console.log(list)
				alert("网络错误")
			}
		})
	}
	var item = []
	//获取typeid
	function getoption4(obj){
		var id = obj.value
		$("#select3id").val(id)
		$.ajax({
			url:"/goddsController/selectTypeId?id=" + id,
			type: "post",
			dataType: "json",
			async: true,
			success: function (list){
				console.log(list)
				var tbItemCat = list.t;
				$("#spanid").text("模板ID:" + tbItemCat.typeId)
				$("#typeid").val(tbItemCat.typeId)
				selectTemplate($("#typeid").val())
				$("#category").val(tbItemCat.name)

			},
			error: function (list){
				console.log(list)
				alert("网络错误")
			}
		})

	}
	//查询商品分类所对应的品牌以及自定义属性
	function selectTemplate(id){
		$.ajax({
			url:"/goddsController/selectTemplate?id=" + id,
			type: "post",
			dataType: "json",
			async: false,
			success: function (list){
				console.log(list)
				var tbTypeTemplate = list.t;
				//拼接品牌下拉列表
				var brandid = tbTypeTemplate.brandIds;
				var brands = JSON.parse(brandid)
				var html = ""
				for (var i = 0; i < brands.length; i++) {
					html += "<option value='" + brands[i].id + "'>" + brands[i].text + "</option>"
				}
				$("#brandid").html(html)
				//拼接扩展属性
				var AttributeItems = tbTypeTemplate.customAttributeItems;
				var items = JSON.parse(AttributeItems);
				var item = ""
				for (var j = 0; j < items.length; j++) {
					item += '<div className="col-md-2 title" value="' + items[j].text + '">' + items[j].text
					item += '<input className="form-control" placeholder="' + items[j].text + '"></div>'
				}
				$("#itemsid").html(item)

			},
			error: function (list){
				console.log(list)
				alert("网络错误")
			}
		})
	}
	var imgurl = []
	var item2 = []
	//增加
	function insert(){
		//获取商品图片图片颜色和地址
		var itemImages = []
		for (var i = 0; i < imgurl.length; i++) {
			var aa = {color:imgurl[i][0],url:imgurl[i][1]}
			itemImages.push(aa)
		}

		//获取select2的value
		var select2 = $("#brandid").select2("data");
		var brandid = {id:select2.id}

		//获取描述
		var content = editor.html()

		//获取扩展属性json字符串
		var placeholders = $("#itemsid").find("div").find("input")
		var customAttributeItem = []
		for (var k = 0; k < placeholders.length; k++) {
			var customAttributeItems = {text:placeholders[k].placeholder,value:placeholders[k].value}
			customAttributeItem.push(customAttributeItems)
		}
		var customAttributeItemJson = JSON.stringify(customAttributeItem)

		//获取规格
		var specificationItemsall = []
		var att
		var divs = $("#specid").find("div")
		for (var i = 0; i < divs.length; i++) {
			if (i % 2 == 0){
				att = new Object();
				var spanText = $(divs[i]).find("span").text()
				att.attributeName=spanText
			}
			var specificationItems = []
			if (i % 2 == 1){
				var inputs = $(divs[i]).find("input")
				for (var j = 0; j < inputs.length; j++) {
					if (inputs[j].checked){
						specificationItems.push(inputs[j].value)
					}
				}
				att.attributeValue=specificationItems
				specificationItemsall.push(att)
			}
		}
		var specificationItemsJson = JSON.stringify(specificationItemsall)

//获取商品明细表数据
		var trs = $("#tableid").find("tr");
		var spec1 = []
		var spec2 = []
		var title
		var price
		var num
		var qq
		var qq2
		var item3 = []
		var checks = document.getElementsByName("check")
		var check
		var k = 0

		for (var j = 1; j < trs.length; j++) {
			if (k<2){

				if (checks[k].checked){
					check = 1
				}else {
					check = 0
				}
			}
			k += 1


			var tds = $(trs[j]).find("td");
			for (var i = 0; i < tds.length; i++) {
				//标题
				title = $("#goodsName").val() + " " + $(tds[0]).find("input").val() + " " + $(tds[1]).find("input").val()
				//价格
				price = $(tds[2]).find("input").val()
				//库存
				num = $(tds[3]).find("input").val()
				//屏幕尺寸
				qq = $(tds[0]).find("input").val()
				//网络制式
				qq2 = $(tds[1]).find("input").val()
			}


			//图片地址
			var imgs = document.getElementsByName("img");
			var src
			for (var i = 0; i < imgs.length; i++) {
				src = $(imgs[i]).attr("src")
			}



			var titles = {title:title,price:price,num:num,image:src,isDefault:check}
			var spec = {spec:{"屏幕尺寸":$(tds[0]).find("input").val(),"网络制式":$(tds[1]).find("input").val()}}
			item2.push(titles)
			item3.push(spec)
		}
		//类目名
		var strtext = $('#brandid').select2('data').text;
		var category = {category:$("#category").val(),sellPoint:$("#caption").val(),categoryid:$("#select3id").val(),brand:strtext,status:0,createTime:new Date(),updateTime:new Date(),stockCount:0}
		item.push(category)
		var itemJson = JSON.stringify(item)
		console.log(itemJson)
		var itemJson2 = JSON.stringify(item2)
		console.log(itemJson2)
		var itemJson3 = JSON.stringify(item3)
		console.log(itemJson3)


		$.ajax({
			url:"/goddsController/insertGoods",
			type: "post",
			dataType: "json",
			data: {
				category1Id:$("#select1id").val(),category2Id:$("#select2id").val(),category3Id:$("#select3id").val(),
				goodsName:$("#goodsName").val(),brandId:brandid.id,caption:$("#caption").val(),
				price:$("#price").val(),introduction:content,packageList:$("#packageList").val(),
				saleService:$("#saleService").val(),typeTemplateId:$("#typeid").val(),itemImages:JSON.stringify(itemImages),
				customAttributeItems:customAttributeItemJson,specificationItems:specificationItemsJson,itemJson:itemJson,itemJson2:itemJson2,itemJson3:itemJson3
			},
			async: false,
			success: function (list){
				console.log(list)
				alert(list.codename)
			},
			error: function (list){
				console.log(list)
				alert("网络错误")
			}
		})
	}

	//增加图片
	function insertimg(){
		BootstrapDialog.show({
			title: '增加',
			message: $('<div></div>').load("/goddsController/toinsertimg"),
			closeable: true,
			buttons: [{
				label: '取消',
				action: function (dialog) {
					dialog.close();
				}
			}, {
				label: '确定',
				action: function (dialog) {
					dialog.close();
					var html = ""
					for (var i = 0; i < imgurl.length; i++) {
						html +=	'<tr><td>' + imgurl[i][0] + '</td><td><img alt="" name="img" src="' + imgurl[i][1] + '" width="100px" height="100px"></td>'
						html += '<td><button type="button" className="btn btn-default" title="删除" onclick="deleteimg(this)"><i className="fa fa-trash-o"></i> 删除</button></td></tr>'
					}
					$("#imgid").html(html)

				}
			}]
		});
	}

	//删除图片
	function deleteimg(obj){
		var tr = obj.parentNode.parentNode
		tr.parentNode.removeChild(tr)
	}

	//拼接规格
	function getitems(){
		$.ajax({
			url:"/goddsController/getitems?id=" + $("#typeid").val(),
			type: "post",
			dataType: "json",
			async: false,
			success: function (list){
				var html = ""
				for (var i = 0; i < list.length; i++) {
					var options = list[i].tbSpecificationOptions;
					html += '<div><span>' + list[i].tbSpecification.text + '</span></div>'
					html += '<div>'
					for (var j = 0; j < options.length; j++) {
						html += '<input type="checkbox" value="' + options[j].optionName + '">' + options[j].optionName
					}
					html += '</div>'
				}
				$("#specid").html(html)


			},
			error: function (list){
				console.log(list)
				alert("网络错误")
			}
		})
	}

	function ckeck(){
		//调用拼接规格函数
		var check = document.getElementById("check")
		if (check.checked){
			getitems()
		}else {
			$("#specid").html("")
		}
	}
</script>

<body class="hold-transition skin-red sidebar-mini" >
			<input type="hidden" id="select1id">
			<input type="hidden" id="select2id">
			<input type="hidden" id="select3id">
			<input type="hidden" id="typeid">
			<input type="hidden" id="category">

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                          
		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select class="form-control" id="select1" onchange="getoption2(this)">

													</select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" id="select2" onchange="getoption3(this)">

													</select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" id="select3" onchange="getoption4(this)">

													</select>
		                              			</td>
		                              			<td>
													<span id="spanid"></span>
		                              			</td>
		                           	  		</tr>
		                           	  	</table>
		                              	
		                              </div>	                              
		                          	  
									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" name="goodsName" id="goodsName" placeholder="商品名称">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select class="form-control" name="brandId" id="brandid"></select>
		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" name="caption" id="caption"  placeholder="副标题">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control" id="price" name="price" placeholder="价格" value="">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
                                   <div class="col-md-10 data editer">
                                       <textarea name="content" id="introduction" style="width:800px;height:400px;visibility:hidden;" ></textarea>
                                   </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4"  class="form-control" name="packageList" id="packageList" placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4"  class="form-control" name="saleService" id="saleService" placeholder="售后服务"></textarea>
		                           </div>                        
                                  
                                    
                                </div>
                            </div>
                            
                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" onclick="insertimg()"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable" id="imgtable">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
					                    <tbody id="imgid">

					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div class="row data-type" id="itemsid">

                                </div>
                            </div>
                      
                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" id="check" onclick="ckeck()">
			                        </div>
                            	</div>
                            	<p>
                            	
                            	<div>
                            	
	                                <div class="row data-type" id="specid">

	                                </div>
	
	                                
	                                <div class="row data-type">
	                                	 <table class="table table-bordered table-striped table-hover dataTable" id="tableid">
						                    <thead>
						                        <tr>
												    <td class="sorting">屏幕尺寸</td>
													<td class="sorting">网络制式</td>
												    <td class="sorting">价格</td>
												    <td class="sorting">库存</td>
												    <td class="sorting">是否启用</td>
												    <td class="sorting">是否默认</td>
											    </tr>
								            </thead>
						                    <tbody>
						                      <tr>
										            <td>
										            	<input type="text" value="4.0">
										            </td>
													<td>
										            	<input type="text" value="3G">
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" name="check">
										            </td>
						                      </tr>
											  <tr>
										            <td>
										            	<input type="text" value="5.0">
										            </td>
													<td>
										            	<input type="text" value="5G">
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" name="check">
										            </td>
						                      </tr>
						                    </tbody>
									 	</table>
								
	                                </div>
	                                
	                            </div>
                            </div>
                            
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
							 
                    </div>

                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button onclick="insert()" class="btn btn-primary" ><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>
            
            <!-- 正文区域 /-->
<script type="text/javascript">

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});

</script>

</body>

</html>